import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Image } from 'react-vant';
import { bindActionCreators } from 'redux'
import * as action from '../action'
import {Loading} from "react-vant"
// 1.下包better-scroll
import BS from "better-scroll"
const style = { // css in js
    width:"100%",
    height:"100%",
}
class Pull extends Component {
   state = {
       isloading:false // 上拉加载和下拉得提示文字
   }
   componentDidMount(){  // 调用请求数据的接口
        this.props.getPullList() // 在action得index.js中得方法
        this.BS = new BS(".shangwrap",{
            pullUpLoad:true, // 开启上拉加载
            pullDownRefresh:true,// 开启下拉刷新
        })
        this.BS.on("pullingUp",()=>{ // 监听上拉
            this.setState({
                isloading:true
            })
            this.props.getPullList("up")
            setTimeout(() => {
                this.BS.refresh() // 重新计算页面得高度
                this.BS.finishPullUp() // 完成上拉加载
                this.setState({
                    isloading:false
                })
            }, 2000);
        })
        this.BS.on("pullingDown",()=>{ // 监听下拉
            this.setState({
                isloading:true
            })
            this.props.getPullList("down")
            setTimeout(() => {
                this.BS.refresh() // 重新计算页面得高度
                this.BS.finishPullDown() // 完成下拉
                this.setState({
                    isloading:false
                })
            }, 2000);
        })
   }
   // betterscroll 要new得盒子里面只能有一个子元素，且子元素得高要超过父元素，且父元素overflwo：hidden
   componentWillUnmount(){ // 页面将要卸载得生命周期
        this.BS.destroy() // 在页面销毁时将betterScroll给卸载掉，让他不在浪费咱们得资源
   }
  render() {
    return (
      <div style={style} className="shangwrap">
          <div className='inner'>
              {
                  this.state.isloading?<div>...加载中</div>:''
              }
              {
                  this.props.pushData&& this.props.pushData.length?this.props.pushData.map((item,index)=>{
                      return <div key={index}>
                           <span>{item.title}</span>
                           <img src={item.img} alt="" />
                           {/* <Image src={item.img} lazyload loadingIcon={<Loading type="spinner" />} errorIcon={<div>加载失败</div>}  width="200" height="200"/> */}
                      </div>
                  }):""
              }
          </div>
      </div>
    )
  }
}
let mapStateToprops = (state)=>{
    console.log(state)
      return {
          ...state.antdReducer
      }
}
let mapDispatchToprops =(disptach)=>bindActionCreators(action,disptach)
export default connect(mapStateToprops,mapDispatchToprops)(Pull)
